<template>
	<div class="web">
		<router-view class="web"></router-view>
		<audio autoplay="autoplay" :src="playmusic" class="audi"></audio>
		<!--this.$store.commit("changeSongsj",audio);-->
	</div>
</template>

<script>
	import jsonp from "jsonp";
	export default {
		data() {
			return {}
		},
		components: {},
		computed: {
			playmusic() {
				return this.$store.state.curSong;
			}		
		},
		 mounted(){ 
		 	var web = document.querySelector(".web .web");
		 	console.log(web)
		 	var time1 = setInterval(function(){
		 		web.style.backgroundColor = "#70231d";
		 	},3000) 
		 	var time2 = setInterval(function(){
		 		web.style.backgroundColor = "#cd8428";
		 	},6000)
		 	var time3 = setInterval(function(){
		 		web.style.backgroundColor = "#153280";
		 	},9000)
		 },
		created() {
			jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=100&offset=0", null, (err, res) => {
				if(err) {
					console.log(err)
				} else {
					var firstId = res.song_list[1].song_id;
					jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + firstId, null, (err, res) => {
						if(err) {

						} else {
							this.$store.commit("changeSong", res.bitrate.file_link);
							this.$store.commit("changeSongname", res.songinfo.title);
							this.$store.commit("changeSongautro", res.songinfo.author);
							this.$store.commit("changeSongpic", res.songinfo.pic_small);
							this.$store.commit("changeSongpicbig", res.songinfo.pic_small);
							this.$store.commit("changeSongsj", res.songinfo.file_duration);
							this.$store.commit("changeLrc", res.songinfo.lrclink);
						}
					})
					var firstId = res.song_list[0].song_id;
					jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + firstId, null, (err, res) => {
						if(err) {

						} else {
							this.$store.commit("changeSong", res.bitrate.file_link);
							this.$store.commit("changeSongname", res.songinfo.title);
							this.$store.commit("changeSongautro", res.songinfo.author);
							this.$store.commit("changeSongpic", res.songinfo.pic_small);
							this.$store.commit("changeSongpicbig", res.songinfo.pic_small);
							this.$store.commit("changeSongsj", res.songinfo.file_duration);
						}
					})
				}
			});
			var nowTime = new Date().getTime(); //获取当前时间,注意返回值为毫秒
			if(sessionStorage.songermusi) { //判断之前是否已经存储了songermusi信息
				var tem = JSON.parse(sessionStorage.songermusi); //将存储的信息转化未json对象格式
				if(nowTime - tem.expir < 3600000) { //判断存储信息的时间和当前时间的距离是否小于1小时
					this.songermusi = tem.data;
//					console.log(1111, tem.data);
//					this.$store.commit("setSongList", tem.data.song_list);
//					console.log(1111, tem.data);
					this.$store.commit("setSongList", tem.data.song_list);
					return; //小于1h就直接return，不再执行ajaj请求
				}
			}
			jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=100&offset=0", null, (err, res) => {
				if(err) {
					console.log(err)
					if(tem) {
						this.songermusi = tem.data; //如果请求失败就用之前存储的值
					}
				} else {
					sessionStorage.songermusi = JSON.stringify({ //把json对象格式转化为字符串

						"data": res,
						"expir": new Date().getTime()
					});
					this.songermusi = res;
					this.$store.commit("setSongList", res.song_list);
//					this.$store.commit("setSongList", res.song_list);
				}
			})
		}
	}
</script>
<style scoped lang="scss">
	.web {
		height: 100%;
		width: 100%;
		position: relative;
		background-color: #253b75;
		color: #fff;
		transition: all 5s ease-in-out;
		overflow: hidden; 
		z-index: 999999; 
	}
</style>